<template>
  <div class="login-box">
    <!-- 最外部 -->
    <div class="l-content">
      <!-- 左侧部分 -->
      <div class="l-left">
        <h1>欢迎使用</h1>
        <h1>汪汪队 立大功</h1>
      </div>
      <!-- 登录的表单部分 -->
      <div class="l-main">
        <el-tabs v-model="activeName" :stretch="true">
          <!-- 手机、验证码登录 -->
          <el-tab-pane class="el-tab-pane" label="短信登录" name="first">
            <el-form
              :model="ruleForm"
              ref="phone"
              label-width="70px"
              class="demo-ruleForm"
              :rules="rules"
            >
              <el-form-item label="手机号" prop="phone">
                <el-input
                  type="password"
                  v-model="ruleForm.phone"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="yzm">
                <el-input
                  type="password"
                  v-model="ruleForm.yzm"
                  autocomplete="off"
                >
                  <template slot="append">发送验证码</template>
                </el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- 账户密码登录 -->
          <el-tab-pane class="el-tab-pane" label="密码登录" name="second">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="password"
              label-width="0px"
              class="demo-ruleForm"
            >
              <el-form-item prop="username">
                <el-input
                  type="password"
                  v-model="ruleForm.username"
                  autocomplete="off"
                  placeholder="用户名"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  v-model="ruleForm.password"
                  autocomplete="off"
                  placeholder="密码"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- 登录按钮 -->
          <el-button type="primary" @click="toLogin(ruleForm)">登录</el-button>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";

export default {
  name: "LoginView",
  data() {
    return {
      activeName: "first",
      user1: {},
      ruleForm: {
        username: "lidazhao",
        password: "Qwe123",
        phone: "13800138001",
        yzm: "654321",
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "submit" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 5 个字符",
            trigger: "submit",
          },
        ],
        yzm: [
          { required: true, message: "请输入验证码", trigger: "submit" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 5 个字符",
            trigger: "submit",
          },
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "submit" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 5 个字符",
            trigger: "submit",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "submit" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 5 个字符",
            trigger: "submit",
          },
        ],
      },
    };
  },

  methods: {
    toLogin() {
      let formName = "";
      if (this.activeName === "first") {
        // 手机号
        formName = this.$refs["phone"];
      } else {
        // 密码
        formName = this.$refs["password"];
      }

      formName.validate((valid) => {
        console.log(valid);
        if (valid) {
          console.log("登录成功!");
          this.login();
        } else {
          console.log("error submit!!");
          return false;
        }
      });

      // axios
      //   .post("equipment/login", {
      //     type: "password",
      //     username: "lidazhao",
      //     password: "Qwe123",
      //   })
      //   .then((res) => {
      //     console.log("1成功", res);
      //   })
      //   .catch((err) => {
      //     console.log("1失败", err);
      //   });
    },
    login() {
      let shuju = {};
      if (this.activeName === "first") {
        shuju = {
          type: "sms",
          phone: this.ruleForm.phone,
          code: this.ruleForm.yzm,
        };
      } else {
        shuju = {
          type: "password",
          username: this.ruleForm.username,
          password: this.ruleForm.password,
        };
      }

      this.$axios({
        method: "post",
        url: "/login",
        data: shuju,
      }).then((res) => {
        console.log(res);
        localStorage.setItem("tocken", JSON.stringify(shuju));
        // this.$router.push({ name: "home" });
        this.$router.push("/home");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login-box {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/hbimg.b0.upaiyun.webp") no-repeat;
  background-size: 100%;

  .l-content {
    width: 700px;
    height: 400px;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
    transform: translateY(50%);
    display: flex;
    justify-content: space-between;
    border-radius: 15px;

    .l-left {
      width: 50%;
      // height: 400px;
      background: url("../../assets/images.uiiiuiii.webp") no-repeat 0 0 /100% 100%;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
      display: flex;
      flex-direction: column;
      justify-content: end;
      color: #fff;
      box-sizing: border-box;
      padding: 0 0 20px 20px;
      // border: 1px solid red;
      box-sizing: border-box;
    }
    .l-main {
      flex: 1;
      padding: 0 8px;
      box-sizing: border-box;

      // border: 1px solid red;
    }
  }
}

.el-tabs {
  width: 100%;
  height: 100%;
  margin-top: 70px;
  font-size: 30px;
  display: block;
  overflow: hidden;
  .el-tab-pane {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // background: red;
  }
}
.el-button {
  width: 100%;
  overflow: hidden;
}
.el-input-group__append {
  padding: 0 8px;

  box-sizing: border-box;
}
</style>